<template>
  <div style="width:800px">
    <!-- 实现table拖动和输入功能 -->
    <el-table :data="tabledatas"
      border
      row-key="id"
      align="left">
      <el-table-column
        prop="name"
        label="###"
        width="40
        ">
      </el-table-column>
      <el-table-column label="tab1">
                <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.tab1"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.tab1}}</span>
                </template>
            </el-table-column>
            <el-table-column label="tab2">
                <template slot-scope="scope">
                    <el-input placeholder="请输入内容" v-show="scope.row.show" v-model="scope.row.tab2"></el-input>
                    <span v-show="!scope.row.show">{{scope.row.tab2}}</span>
                </template>
            </el-table-column>
     <!-- <el-table-column v-for="(item, index) in col"
        :key="`col_${index}`"
        :prop="dropCol[index].prop"
        :label="item.label"> 
      </el-table-column> -->
    </el-table>
    <button @click="ceshi">ssss</button>
  </div>
</template>
<script>
import Sortable from 'sortablejs'
export default {
  data() {
    return {
      col: [
        {
          label: '日期',
          prop: 'date'
        },
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '地址',
          prop: 'address'
        }
      ],
      dropCol: [
        {
          label: '日期',
          prop: 'date'
        },
        {
          label: '姓名',
          prop: 'name'
        },
        {
          label: '地址',
          prop: 'address'
        }
      ],
       tabledatas: [
        { id:'1', tab1: '111', tab2: '2222', show:true},
        { id:'2', tab1: 'aaa', tab2: 'bbb' , show:true},
        { id:'3', tab1: '111', tab2: '2222', show:true},
        { id:'4', tab1: 'aaa', tab2: 'bbb' , show:false},
        { id:'5', tab1: '111', tab2: '2222', show:false},
        { id:'6', tab1: 'aaa', tab2: 'bbb' , show:false},
      ],
    }
  },
  mounted() {
    this.rowDrop()
    // this.columnDrop()
  },
  methods: {
    //行拖拽
    rowDrop() {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, {
        onEnd({ newIndex, oldIndex }) {
          const currRow = _this.tabledatas.splice(oldIndex, 1)[0]
          _this.tabledatas.splice(newIndex, 0, currRow)
        }
      })
      
    },
    ceshi() {
        console.log(this.tabledatas)
    }
    //列拖拽
    // columnDrop() {
    //   const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
    //   this.sortable = Sortable.create(wrapperTr, {
    //     animation: 180,
    //     delay: 0,
    //     onEnd: evt => {
    //       const oldItem = this.dropCol[evt.oldIndex]
    //       this.dropCol.splice(evt.oldIndex, 1)
    //       this.dropCol.splice(evt.newIndex, 0, oldItem)
    //     }
    //   })
    // }
  }
}
</script>
<style scoped>

</style>